<template>
  <div class="aside-tools">
    <button v-if="props.showTopping" @click="topping" class="btn-topping">
      <label class="topping-icon"></label>
    </button>
  </div>
</template>

<script setup>
const emits = defineEmits(['topping'])
const props = defineProps({
  showTopping: {
    default: false,
    type: Boolean
  }
})

const topping = () => {
  emits('topping')
}
</script>

<style lang="less" scoped>
.aside-tools {
  position: fixed;
  right: 88px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-return,
.btn-topping {
  border: 0;
  width: 64px;
  height: 56px;
  box-shadow: 0 7px 10px 2px rgba(160, 169, 192, 0.28);
  border-radius: 8px;
  background-color: @theme-color;
  font-size: @base-size;
  color: #fff;
  cursor: pointer;

  &:hover {
    background-color: @theme-color--hover;
  }

  &:active {
    background-color: @theme-color--active;
  }
}

.btn-topping {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .topping-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('@/assets/images/icon-topping.png') no-repeat center/cover;
  }
}
</style>
